<template>
    <div class="rank" v-infinite-scroll="load">
        <el-card>
            <div class="filter-item" v-for="item, index in datalist" :key="item">
                <div class="filter-title">{{ categories[index] }}</div>
                <div class="filter-box">
                    <span class="item-box "
                        :class="{ 'click': (j.value == area && j.type == 'area') || (j.value == type && j.type == 'type') || (j.value == order && j.type == 'order') }"
                        v-for="j in item" :key="j" @click="typeClick(j)">
                        {{ j.name }}
                    </span>
                </div>
            </div>
        </el-card>
        <el-row :gutter="0">
            <el-col :span="4" v-for="item in mvlist">
                <div class="mv-info">
                    <div class="jiaobiao">
                        <i class="iconfont icon-play"></i><span>{{ formartNum(item.playCount) }}</span>
                    </div>
                    <div class="play-icon">
                        <i class="iconfont icon-bofang2"></i>
                    </div>
                    <div @click="router.push(`/mv/detail?id=${item.id}`)"><el-image :src="item.cover"></el-image></div>

                    <div class="artist">
                        <div class="artist-name" @click="router.push(`/mv/detail?id=${item.id}`)">
                            {{ item.name }}
                        </div>
                        <div class="artist-alias">
                            <span type="info" v-for="alias, index in item.artists"
                                @click="router.push(`/artist?id=${alias.id}`)">{{ index == 0 ? alias.name : '/' + alias.name
                                }}</span>
                        </div>

                    </div>

                </div>
            </el-col>
            <el-empty description="该类别暂无数据" style="margin: 0 auto;" v-if="mvlist.length == 0" />
            <Loading v-else></Loading>
        </el-row>
    </div>
</template>

<script setup>
import Loading from '@/components/Loading.vue'
import { getAllMv } from '@/api/mv'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { formartNum } from '@/utils/util'

onMounted(async () => {
    const res = await getAllMv({ area: area.value, type: type.value, order: order.value })

    mvlist.value = res.data
})

const mvlist = ref([])
const router = useRouter()
const route = useRoute()
const area = ref(route.query.area || '全部')
const type = ref(route.query.type || '全部')
const order = ref(route.query.order || '上升最快')
const categories = ref(['地区', '类型', '排序'])//地区，类型，排序
const datalist = ref([[
    { name: '全部', value: '全部', type: 'area' },
    { name: '内地', value: '内地', type: 'area' },
    { name: '港台', value: '港台', type: 'area' },
    { name: '欧美', value: '欧美', type: 'area' },
    { name: '日本', value: '日本', type: 'area' },
    { name: '韩国', value: '韩国', type: 'area' },
], [
    { name: '全部', value: '全部', type: 'type' },
    { name: '官方版', value: '官方版', type: 'type' },
    // { name: '原生', value: '原生', type: 'type' },
    { name: '现场版', value: '现场版', type: 'type' },
    { name: '网易出品', value: '网易出品', type: 'type' },
], [
    { name: '上升最快', value: '上升最快', type: 'order' },
    { name: '最热', value: '最热', type: 'order' },
    { name: '最新', value: '最新', type: 'order' },
]])



const typeClick = (item) => {
    if (item.type == 'area') {
        area.value = item.value
        router.push({
            path: '/mv', query: {
                area: area.value,
                type: type.value,
                order: order.value
            }
        })
    } else if (item.type == 'type') {
        type.value = item.value
        router.push({
            path: '/mv', query: {
                area: area.value,
                type: type.value,
                order: order.value
            }
        })
    } else if (item.type == 'order') {
        order.value = item.value
        router.push({
            path: '/mv', query: {
                area: area.value,
                type: type.value,
                order: order.value
            }
        })
    }

}

const load = async () => {
    const res = await getAllMv({ area: area.value, type: type.value, order: order.value, offset: mvlist.value.length })
    mvlist.value = mvlist.value.concat(res.data)
}

</script>

<style lang="less" scoped>
.rank {
    margin: 40px 10px;
    height: calc(100vh - 140px);

    .filter-item {
        display: flex;
        // align-items: center;
        font-size: 0;
        padding: 5px 0;

        .filter-title {
            display: inline-block;
            font-size: 14px;
            line-height: 14px;
            padding: 5px 20px 0 0;
            color: #505a68;
            font-weight: 300;
            cursor: pointer;
            border-right: 1px solid #eee;
        }

        .filter-box {
            flex: 1;
            display: flex;
            flex-wrap: wrap;

            .item-box {
                display: inline-block;
                width: 70px;
                font-size: 14px;
                line-height: 14px;
                height: 14px;
                // margin: 5px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                cursor: pointer;
                text-align: center;
                // background: red;
                padding: 5px 0;
            }

            .click {
                display: inline-block;
                border-radius: 500px;
                background: #409eff;
                color: white;
            }
        }
    }

    .el-col {
        margin-top: 30px;
    }

    .mv-info {
        position: relative;
        margin: 20px 8px 10px 8px;

        &:hover {
            .play-icon {
                opacity: 1;
            }
        }

        .jiaobiao {
            position: absolute;
            z-index: 9;
            top: 0;
            right: 0;
            padding: 10px;
            color: white;
            font-size: 12px;

            i {
                font-size: 12px;
            }
        }

        .play-icon {
            position: absolute;
            //top的值为图片高度的一半减去icon的高度的一半
            top: calc(60% - 25px);
            right: 3%;
            padding: 5px;
            cursor: pointer;
            z-index: 9;
            opacity: 0;
            transition: all .3s ease-in-out;

            i {
                font-size: 25px;
                color: white;
            }
        }

        :deep(.el-image) {
            cursor: pointer;
            width: 100%;
            height: 100%;
            box-shadow: inset 0px 0px 30px -5px rgba(0, 0, 0, .5);

            .el-image__inner {
                position: relative;
                z-index: -1;
                vertical-align: top;
            }

        }

        .artist {
            margin-top: 10px;

            .artist-name {
                font-size: 14px;
                color: #141414;
                cursor: pointer;
                //溢出隐藏显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // display: inline-block;

            }

            .artist-alias {
                span {
                    font-size: 13px;
                    color: var(--el-color-info);
                    cursor: pointer;
                }
            }
        }

    }
}
</style>